<!-- 横向布局 -->
<template>
  <el-container class="layout">
    <el-header>
      <div class="logo flx-center">
        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
        <span class="logo-text">{{ title }}</span>
      </div>
      <el-menu mode="horizontal" :default-active="activeMenu" :router="false">
        <!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
        <template v-for="subItem in menuList" :key="subItem.id">
          <template v-if="subItem.children && subItem.children?.length > 0">
            <el-sub-menu :key="subItem.id" :index="subItem.id + 'el-sub-menu'">
              <template #title>
                <el-icon>
                  <jxtech-svg-icon
                    v-if="subItem.attributes.image"
                    :icon="subItem.attributes.image"
                    :size="16"
                    class="pointer"
                  ></jxtech-svg-icon>
                  <jxtech-svg-icon v-else icon="#icon-modular" :size="16" class="pointer"></jxtech-svg-icon>
                </el-icon>
                <span>{{ subItem.text }}</span>
              </template>
              <SubMenu :menu-list="subItem.children" />
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item
              :key="subItem.id"
              :index="jumpUrl(subItem)"
              :disabled="isDisabled(subItem.attributes.url)"
              @click="handleClickMenu(subItem)"
            >
              <el-icon>
                <jxtech-svg-icon v-if="subItem.attributes.image" :icon="subItem.attributes.image" :size="16" class="pointer">
                </jxtech-svg-icon>
                <jxtech-svg-icon v-else icon="#icon-modular" :size="16" class="pointer"></jxtech-svg-icon>
              </el-icon>
              <template #title>
                <span>{{ subItem.text }}</span>
              </template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
      <ToolBarRight />
    </el-header>
    <main-content></main-content>
  </el-container>
</template>

<script setup lang="ts" name="layoutTransverse">
import { computed } from "vue";
import { useAuthStore } from "@/stores/modules/auth";
import { useRoute, useRouter } from "vue-router";
import MainContent from "@/layouts/components/Main/index.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import { SYSTEM_CONFIG } from "@/config/system";
import { JxtechMenu } from "@/stores/interface/auth";
import { jumpPath } from "@/utils/router-kit";

const title = SYSTEM_CONFIG.APP_NAME;

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
// const menuList = computed(() => authStore.showMenuListGet);
const menuList = computed(() => authStore.authMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);

const jumpUrl = (menu: JxtechMenu) => {
  var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
  if (regPos.test(menu.attributes.vuePath)) return `${menu.attributes.url}/${menu.attributes.vuePath}`;
  else return `${menu.attributes.url}`;
};
const isDisabled = (url: string) => {
  return url === null || url === undefined || url === "";
};

const handleClickMenu = (subItem: JxtechMenu) => {
  // if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  // router.push(subItem.path);
  if (subItem.attributes.url && subItem.children?.length === 0) {
    var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
    const path = regPos.test(subItem.attributes.vuePath)
      ? subItem.attributes.url + "/" + subItem.attributes.vuePath
      : subItem.attributes.url;
    jumpPath(path);
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
